<template>
  <div id="activites">
    <!--top-header-->
    <top-header></top-header>
    <!--logo and search-->
    <div style="clear: left" class="logoAndSearch">
      <logo-search @on-submit="onSubmit"></logo-search>
    </div>
    <!--nav-->
    <h-nav :activeIndex="activeIndex"></h-nav>

    <!--内容区-->
    <div class="container maxWidth clearfix">
      <div class="zhi_tit clearfix">
        <h4>
          <span class='title'><img v-src="'/static/img/zhi_title.png'" alt=""></span>
          今日推广活动
        </h4>
        <div v-show="false" class="show_type">
          <ul>
            <li class="current"><a class="type_list" title="列表模式"></a></li>
            <li><a class="type_grid" title="网格模式" href="javascript:void (0)"></a></li>
          </ul>
          <div id="showtype_pop"
               style="position:absolute;top:-25px;left:-315px;width:364px;height:81px;background:url(//i.huim.com/content_new/images/show_type_pop.png) no-repeat;"
               _hover-ignore="1"><a href="javascript:void (0);"
                                    style="background:none;width:25px;height:25px;margin-left:230px;" title="知道了"></a>
          </div>
        </div>
        <span v-show="false" class="fr">浏览模式</span>
      </div>
      <div class="container-left fl">
        <div class="item_box">
          <div class="item_list clearfix" v-for="(item , index) in leftListData">
            <div class="list_pic fl">
              <a @click="toGoBuy(item.id)" target="_blank">
                <img v-lazy="item.recommendPagePic" >
              </a>
            </div>
            <div class="list_info fl" _hover-ignore="1">
              <p class="list_tit">
                <a target="_blank">
                  <i v-show="item.iconPic" class="top_ico" :style="{backgroundImage:`url(${item.iconPic})`}">
                  </i>
                  {{item.title}} </a>
              </p>
              <p @click="toGoBuy(item.id)" class="list_price"><a target="_blank" href="javascript:void (0)" _hover-ignore="1">{{item.subtitle}}</a></p>
              <div class="list_doc">
                {{item.recommendedReason}}
              </div>
              <div class="list_action">
                <p class="list_label">
                  <a href="/0-1-0-0-0/" v-show="true">{{item.platformType}}</a>

                  <span class="pub_time">
                    <i class="ico_clock">
                    </i>今天 {{(item.insertTime.substr(11)).substr(0,5)}}
                  </span>
                  <a v-show="false" target="_blank" href="##">评论5
                  </a>
                </p>
                <!--<p class="list_page">-->
                <!--<span v-show="false" class="pub_time"><i class="ico_clock"></i>今天 08:45</span>-->
                <!--<span v-show="false"  class="page_num">2831人已浏览</span>-->
                <!--</p>-->
                <a target="_blank" @click="toGoBuy(item.id)" class="list_buy_btn combtn_b combtn_red" isconvert="1"
                   href="javascript:void (0)"><i class="home_icon"></i><span>前往购买</span></a>
              </div>
            </div>
            <div class="tab_tips">
            </div>
          </div>
        </div>
      </div>
      <!--container - right -->
      <div class="container-right fr">
        <!--top-banner-->
        <div class="top_banner">
          <div class="banner_title clearfix">
            <div class="box_title fl">
              <i></i>精选商品
            </div>
            <div class="banner_page fr"><span id="current_page">{{swiperIndex+1}}</span> / <span
              id="count_page">3</span></div>
          </div>
          <div class="tm_slider">
            <div @mouseenter="enter" @mouseleave="leave" class="tm_banner">
              <swiper loop auto v-model="swiperIndex" height="390px" dots-position="center" :duration="300"
                      :interval=3000 :show-dots="false">
                <swiper-item @click.native="toTaobao(item.goodId)"  :key="index" v-for="(item ,index) in bannerData">
                  <div class="banner-item">
                    <a target="_blank" class="banner_pic" href="javascript:void(0);">
                      <img v-src="item.mainPic">
                      <div class="rule_box">
                        <p class="tip"> {{item.name}}</p>
                        <div class="view_num flex-col">
                          <!--<p>浏览 55483<span class="comment">评论 218</span></p>-->
                          <div class="priceBox flex-grow-1">
                            <span>￥</span>
                            <span>{{item.priceAfterCoupon | getCount}}</span>
                            <span>券后价</span>
                          </div>
                          <div class="clearfix bottom">
                            <div class="fl">领{{item.couponValue | getCount}}元券</div>
                            <div class="fr">{{item.couponUse}}人使用</div>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>
                </swiper-item>
              </swiper>
            </div>
          </div>
          <!-- /滑动块 -->
          <div v-show="showArrow" class="tm_banner_arrow">
            <a @mouseenter="enter" @mouseleave="leave" href="javascript:;" class="arrow_prev" data-arrow="prev"><i></i></a>
            <a @mouseenter="enter" @mouseleave="leave" href="javascript:;" class="arrow_next" data-arrow="next"><i></i></a>
          </div>
        </div>
        <!--热门精选-->

        <div class="side_item tj_hot" style="top: 15px;">
          <div class="side_item_tit" _hover-ignore="1">
            <i></i>热门商品
          </div>
          <div ref="listbox" @mouseenter="scrollEnter" @mouseleave="scrollLeave"
               class="side_item_content tj_hot_cot clearfix">
            <ul ref="listbox1">
              <li @click="toTaobao(item.goodId)" v-for="(item, index) in goodsRightListData" class="clearfix">
                <a target="_blank" class="tj_hot_img" href="javascript:void(0)"><img
                  v-lazy="item.mainPic" alt=""></a>
                <div class="hot_info">
                  <div class="hot_info_tit">
                    <a target="_blank" href="javascript:void (0)" _hover-ignore="1">
                      {{item.name}}
                    </a>
                  </div>
                  <div class="hot_info_extra flex-row flex-y-center">
                    <!--<span class="extra_item">浏览<font _hover-ignore="1">3056263</font></span>-->
                    <!--<span>评论<font>4857</font></span>-->
                    <div class="priceBox flex-grow-1">
                      <span>￥</span>
                      <span>{{item.priceAfterCoupon | getCount}}</span>
                      <span>券后价</span>
                    </div>
                    <div class="btn flex-grow-0">领{{item.couponValue | getCount}}元券</div>
                  </div>
                </div>
              </li>
            </ul>
            <div ref="listbox2" class="list2"></div>
          </div>
        </div>

      </div>

    </div>

    <!--footer-->
    <v-footer></v-footer>

    <!--回到顶部-->
    <go-top :isShowGoTop="isShowGoTop"></go-top>
  </div>
</template>
<script>
  import TopHeader from 'src/components/common/topHeader.vue'
  import HNav from 'src/components/common/nav.vue'
  import LogoSearch from 'src/components/common/logoSearch.vue'
  import VFooter from 'src/components/common/footer.vue'
  import goTop from 'src/components/common/goTop'
  import {Swiper, SwiperItem} from 'vux'
  import {RUI_GETACTIVITIESLIST,RUI_GETTYPECOUPON,GETCHANGELINK} from 'src/const/uri'

  let timer;

  export default {
    components: {HNav, TopHeader, LogoSearch, VFooter, Swiper, SwiperItem, goTop},
    data() {
      return {
        activeIndex: 1,
        swiperIndex: 0,
        showArrow: false,
        isShowGoTop: false,

        reqPage:1,
        reqPageSize:20,

        leftListData:[],
        goodsRightListData:[],
        bannerData:[],
      }
    },
    created() {
      this.initData();
      this.getRightData();
    },
    mounted() {
      this.funSetInterval();
      window.addEventListener('scroll', () => {
        if (document.documentElement.scrollTop > 1000) {
          this.isShowGoTop = true;
        } else {
          this.isShowGoTop = false;
        }
      })
    },
    methods: {
      initData() {
        this.$ajax.get(RUI_GETACTIVITIESLIST, {
          reqPage:this.reqPage,
          reqPageSize:this.reqPageSize,
        }, (res) => {
          console.log(res);
          this.leftListData=res.data.data;
        });
      },
      getRightData() {
        this.$ajax.get(RUI_GETTYPECOUPON,{
          reqPage:this.reqPage,
          reqPageSize:20,
          goodCatId:0,
          promotionTypeId:1,
          type:-1,
          sort:''
        },(res)=>{
          this.goodsRightListData=res.data.data;
          this.bannerData=this.goodsRightListData.splice(0,3);
          console.log('banner');
          console.log(this.goodsRightListData);
        });
      },
      funSetInterval() {
        let speed = 40;
        let listbox = this.$refs.listbox;
        let listbox1 = this.$refs.listbox1;
        let listbox2 = this.$refs.listbox2;
        listbox2.innerHTML = listbox1.innerHTML;
        timer = setInterval(() => {
          if (listbox.scrollTop >= listbox1.offsetHeight) {
            listbox.scrollTop = 0;
          }
          else {
            listbox.scrollTop = listbox.scrollTop + 1;
          }
        }, speed)
      },
      containerMenuClick(index) {
        this.menuCurrentIndex = index;
      },
      enter() {
        this.showArrow = true;
      },
      leave() {
        this.showArrow = false;
      },
      scrollEnter() {
        clearInterval(timer)
      },
      scrollLeave() {
        this.funSetInterval()
      },
      onSubmit(val) {
        window.location.href = `${cdnBase}/html/souhuiquan.html?key=${val}`
      },
      //跳转详情页
      toGoBuy(id){
        window.open(`${cdnBase}/html/detail.html?id=${id}`);
      },
      toTaobao(goodId){
        this.$ajax.get(GETCHANGELINK,{
          goodId:goodId,
          promotionTypeId:1
        },(res)=>{
          window.open(res.data.tbkCouponLink);
        });
      }
    }

  }
</script>
<style lang="less" scoped>
  @import "activites";
</style>
